<!DOCTYPE html>
<!-- saved from url=(0059)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/9-3.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>点击加分效果——可重复点击</title>
	<style>
		#wrap {
			position: relative;
			border: 1px solid #000;
			height: 50px;
			width: 590px;
			margin: 200px auto;
		}
		#bg {
			position: absolute;
			top: 0;
			left: 0;
			height: 50px;
			width: 0px;
			background: #31F7EF;
		}
		span {
			width: 50px;
			height: 50px;
			font-size: 28px; line-height: 50px;
			text-align: center;
			position: absolute;
			top: 0;
		}
	</style>
	<script>
		function getStyle(obj, attr){
			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
		}

		function doMove (obj, attr, step, frequency, target, endFn){

			clearInterval(obj.timer);
			step = parseInt(getStyle(obj, attr)) < target ? step : -step; 

			obj.timer = setInterval(function(){
				var displace = parseInt(getStyle( obj, attr )) + step; // 位移
				if ( step > 0 && displace > target || step < 0 && displace < target) {
					displace = target;
				}
				
				obj.style[attr] = displace + 'px';
				if( displace == target ) {
					clearInterval(obj.timer);
					endFn && endFn();
				}
			}, frequency);
		}

		function opacity(obj, step, target, frequency, endFn){

				var currentOpacity = getStyle(obj, 'opacity') * 100;
				step = currentOpacity < target ? step : -step;

				clearInterval(obj.alpha);

				obj.alpha = setInterval(function(){
					currentOpacity = getStyle(obj, 'opacity') * 100;
					var nextOpacity = currentOpacity + step;
					if(step > 0 && nextOpacity > target || step < 0 && nextOpacity < target){
						nextOpacity = target;
					}
					obj.style.opacity = nextOpacity/100;
					obj.style.filter = 'alpha(opacity:' + nextOpacity + ')';
					if(nextOpacity == target){
						clearInterval(obj.alpha);
						endFn && endFn();
					}
				}, frequency);

			}
		
		window.onload = function(){
			var oWrap = document.getElementById('wrap'),
				oBg = document.getElementById('bg'),
				aSpan = oWrap.getElementsByTagName('span'),
				num = 0,
				timer = null;

			for(var i=0; i<10; i++){
				aSpan[i].style.left = 60 * i + 'px';
			}

			oWrap.onclick = function(){
				doMove(oBg, 'width', 50, 90, 590);
				opacity(oBg, 10, 0, 150);
				clearInterval(timer);
				timer = setInterval(function(){
					doMove(aSpan[num], 'top', 10, 50, -250);
					opacity(aSpan[num],10, 0, 80);
					num ++;
					if ( num == aSpan.length) {
						clearInterval(timer);
					}
				}, 100);
			}

		}
	</script>
</head>
<body>
	<div id="wrap">
		<div id="bg" style="width: 590px; opacity: 0;"></div>
		<span style="left: 0px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 60px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 120px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 180px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 240px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 300px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 360px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 420px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 480px; top: -250px; opacity: 0;">+1</span>
		<span style="left: 540px; top: -250px; opacity: 0;">+1</span>		
	</div>
</body></html>